<template>
  <a-form
      :model="ruleForm"
      ref="ruleForm"
      v-bind="layout"
      :rules="rules"
      @finish="handleFinish">
    <a-form-item label="样品名称" name="sample_name">
      <a-input v-model:value="ruleForm.sample_name"/>
    </a-form-item>
    <a-form-item label="合金代码" name="alloy_code">
      <a-select
          v-model:value="ruleForm.alloy_code"
          style="width: 120px"
          ref="select"
      >
        <a-select-option
            v-for="item in alloyCodeSelectionOptions"
            :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="数据来源" name="data_source">
      <a-input v-model:value="ruleForm.data_source"/>
    </a-form-item>
    <a-form-item label="样品状态" name="sample_status">
      <a-input v-model:value="ruleForm.sample_status"/>
    </a-form-item>
    <a-form-item label="设备名称" name="equipment_name">
      <a-input v-model:value="ruleForm.equipment_name"/>
    </a-form-item>
    <a-form-item label="设备厂家" name="equipment_manufacturer">
      <a-input v-model:value="ruleForm.equipment_manufacturer"/>
    </a-form-item>
    <a-form-item label="设备型号" name="device_model">
      <a-input v-model:value="ruleForm.device_model"/>
    </a-form-item>
    <a-form-item label="样品形状" name="sample_shape">
      <a-input v-model:value="ruleForm.sample_shape"/>
    </a-form-item>
    <a-form-item label="厚度" name="sample_thickness">
      <a-input v-model:value="ruleForm.sample_thickness"/>
    </a-form-item>
    <a-form-item label="直径" name="sample_diameter">
      <a-input v-model:value="ruleForm.sample_diameter"/>
    </a-form-item>
    <a-form-item label="试验温度" name="test_temperature">
      <a-input v-model:value="ruleForm.test_temperature"/>
    </a-form-item>
    <a-form-item label="测试前样品质量" name="sample_quality_before_test">
      <a-input v-model:value="ruleForm.sample_quality_before_test"/>
    </a-form-item>
    <a-form-item label="测试前样品体积" name="sample_volume_before_test">
      <a-input v-model:value="ruleForm.sample_volume_before_test"/>
    </a-form-item>
    <a-form-item label="摩擦方式" name="friction_test">
      <a-input v-model:value="ruleForm.friction_test"/>
    </a-form-item>
    <a-form-item label="测试时间" name="test_time">
      <a-input v-model:value="ruleForm.test_time"/>
    </a-form-item>
    <a-form-item label="施加载荷" name="applied_load">
      <a-input v-model:value="ruleForm.applied_load"/>
    </a-form-item>
    <a-form-item label="摩擦速率" name="friction_velocity">
      <a-input v-model:value="ruleForm.friction_velocity"/>
    </a-form-item>
    <a-form-item label="摩擦距离" name="friction_distance">
      <a-input v-model:value="ruleForm.friction_distance"/>
    </a-form-item>
    <a-form-item label="摩擦系数" name="friction_coefficient">
      <a-input v-model:value="ruleForm.friction_coefficient"/>
    </a-form-item>
    <a-form-item label="质量磨损量" name="mass_wear">
      <a-input v-model:value="ruleForm.mass_wear"/>
    </a-form-item>
    <a-form-item label="体积磨损量" name="volume_wear">
      <a-input v-model:value="ruleForm.volume_wear"/>
    </a-form-item>
    <a-form-item label="质量磨损速率" name="mass_wear_rate">
      <a-input v-model:value="ruleForm.mass_wear_rate"/>
    </a-form-item>
    <a-form-item label="体积磨损速率" name="volume_wear_rate">
      <a-input v-model:value="ruleForm.volume_wear_rate"/>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" :loading="submitting" html-type="submit">
        {{ submitting ? '提交中' : '确定' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import {message} from 'ant-design-vue'

export default {
  name: 'AddOrEditFrictionAndWearProperty',
  // url !== ''则为编辑操作，否则为添加
  props: ['url'],
  emits: ['operate-success', 'operate-failed'],
  data() {
    // validStr 不包含空格
    let validateAlloyName = async (rule, value) => {
      if (value === ''){
        return Promise.reject('请选择合金代码')
      }
    }
    return {
      ruleForm: {
        sample_name: '',
        alloy_code: '',
        data_source: '',
        sample_status: '',
        equipment_name: '',
        equipment_manufacturer: '',
        device_model: '',
        sample_shape: '',
        sample_thickness: '',
        sample_diameter: '',
        test_temperature: '',
        sample_quality_before_test: '',
        sample_volume_before_test: '',
        friction_test: '',
        test_time: '',
        applied_load: '',
        friction_velocity: '',
        friction_distance: '',
        friction_coefficient: '',
        mass_wear: '',
        volume_wear: '',
        mass_wear_rate: '',
        volume_wear_rate: '',
      },
      rules: {
        alloy_code: [
          {
            validator: validateAlloyName,
            trigger: 'change',
            required: true,
            whiteSpace: true,
          }
        ],
      },
      layout: {
        labelCol: {span: 6},
        wrapperCol: {span: 14},
      },
      submitting: false,
      alloyCodeSelectionOptions: [],
      headers: {
        authorization: 'authorization-text',
      },
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    // 从后端获取数据
    fetch() {
      this.alloyCodeSelectionOptions = []
      this.axios
          .get('/attachment_management/alloy_phase_diagram/')
          .then((res) => {
            const data = res.data
            for (let i = 0; i < data.length; ++i) {
              this.alloyCodeSelectionOptions.push({
                url: data[i].url,
                label: data[i].alloy_code,
              })
            }
            this.ruleForm.alloy_code = data.length === 0 ? '' : data[0].url
            if (this.url !== '') {
              this.axios
                  .get(this.url)
                  .then((res) => {
                    const data = res.data
                    this.ruleForm.sample_name = data.sample_name
                    this.ruleForm.alloy_code = data.alloy_code
                    this.ruleForm.data_source = data.data_source
                    this.ruleForm.sample_status = data.sample_status
                    this.ruleForm.equipment_name = data.equipment_name
                    this.ruleForm.equipment_manufacturer = data.equipment_manufacturer
                    this.ruleForm.device_model = data.device_model
                    this.ruleForm.sample_shape = data.sample_shape
                    this.ruleForm.sample_thickness = data.sample_thickness
                    this.ruleForm.sample_diameter = data.sample_diameter
                    this.ruleForm.test_temperature = data.test_temperature
                    this.ruleForm.sample_quality_before_test = data.sample_quality_before_test
                    this.ruleForm.sample_volume_before_test = data.sample_volume_before_test
                    this.ruleForm.friction_test = data.friction_test
                    this.ruleForm.test_time = data.test_time
                    this.ruleForm.applied_load = data.applied_load
                    this.ruleForm.friction_velocity = data.friction_velocity
                    this.ruleForm.friction_distance = data.friction_distance
                    this.ruleForm.friction_coefficient = data.friction_coefficient
                    this.ruleForm.mass_wear = data.mass_wear
                    this.ruleForm.volume_wear = data.volume_wear
                    this.ruleForm.mass_wear_rate = data.mass_wear_rate
                    this.ruleForm.volume_wear_rate = data.volume_wear_rate
                  })
                  .catch((error) => {
                    console.log('Error', error.message)
                  })
            }
          })
          .catch((error) => {
            console.log('Error', error.message)
            this.ruleForm.alloy_code = ''
          })
    },
    handleFinish(values) {
      this.submitting = true
      const formData = new FormData()
      formData.append('sample_name', values.sample_name)
      formData.append('alloy_code', values.alloy_code)
      formData.append('data_source', values.data_source)
      formData.append('sample_status', values.sample_status)
      formData.append('equipment_name', values.equipment_name)
      formData.append('equipment_manufacturer', values.equipment_manufacturer)
      formData.append('device_model', values.device_model)
      formData.append('sample_shape', values.sample_shape)
      formData.append('sample_thickness', values.sample_thickness)
      formData.append('sample_diameter', values.sample_diameter)
      formData.append('test_temperature', values.test_temperature)
      formData.append('sample_quality_before_test', values.sample_quality_before_test)
      formData.append('sample_volume_before_test', values.sample_volume_before_test)
      formData.append('friction_test', values.friction_test)
      formData.append('test_time', values.test_time)
      formData.append('applied_load', values.applied_load)
      formData.append('friction_velocity', values.friction_velocity)
      formData.append('friction_distance', values.friction_distance)
      formData.append('friction_coefficient', values.friction_coefficient)
      formData.append('mass_wear', values.mass_wear)
      formData.append('volume_wear', values.volume_wear)
      formData.append('mass_wear_rate', values.mass_wear_rate)
      formData.append('volume_wear_rate', values.volume_wear_rate)
      if (this.url !== '') {
        this.axios
            .put(this.url, formData)
            .then(() => {
              this.submitting = false
              message.success('修改成功！')
              this.$emit('operate-success')
            })
            .catch((error) => {
              this.submitting = false
              message.error('修改失败！')
              this.$emit('operate-failed')
              console.log('Error', error.message)
            })
      } else {
        this.axios
            .post('/property_management/frictional_property/', formData)
            .then(() => {
              this.submitting = false
              message.success('添加成功！')
              this.$emit('operate-success')
            })
            .catch((error) => {
              this.submitting = false
              message.error('添加失败！')
              this.$emit('operate-failed')
              console.log('Error', error.message)
            })
      }
    },
  },
}
</script>
